<template>
  <div class="daytime">
    <Yinghua></Yinghua>
    <MouseClick></MouseClick>

    <div>
      <div class="header"></div>
      <header class="gird-header">
        <div class="header-fixed">
          <div class="header-inner">
            <router-link class="header-logo" id="logo" to="/home">
            Mr.林
            </router-link>

            <transition name="fade">
              <nav class="nav" id="nav">
                <ul>
                  <li><router-link to="/home">首页</router-link></li>
                  <li><router-link to="/shop">优购</router-link></li>
                  <li><router-link to="/notify">消息</router-link></li>
                  <li><router-link to="/user">我的</router-link></li>
                  <li><a href="link.html">友链</a></li>
                </ul>
              </nav>
            </transition>
            <a href="/User/QQLogin" class="blog-user">
              <i class="fa fa-qq"></i>
            </a>
            <a class="phone-menu">
              <i></i>
              <i></i>
              <i></i>
            </a>
          </div>
        </div>
      </header>
      <div class="doc-container" id="doc-container">
        <div class="container-fixed">
          <div class="col-content">
            <div class="inner">
              <article class="article-list bloglist" id="LAY_bloglist">
                <section class="article-item zoomIn article">
                  <div class="fc-flag">置顶</div>
                  <h5 class="title">
                    <span class="fc-blue">【原创】</span>
                    <a href="read.html">Java学习路线推荐</a>
                  </h5>
                  <div class="time">
                    <span class="day">1</span>
                    <span class="month fs-18">7<span class="fs-14">月</span></span>
                    <span class="year fs-18 ml10">2020</span>
                  </div>
                  <div class="content">
                    <a href="read.html" class="cover img-light">
                      <img src="image/java.jpg" />
                    </a>
                    这篇文章是为了介绍自己自学用过的Java视频资料。本套整合教程总共180+G，共450+小时。考虑到绝大部分视频至少要看两遍，而且视频总时长并不代表学习时长，所以零基础初学者总学习时间大约为：600小时视频时长
                    + 100小时理解 +
                    100小时练习，至少需要800小时。你可能觉得自己能一天学习8小时，实际上平均下来每天能学4小时都算厉害了。总会有各种原因，比如当天内容太难，公司聚会，要出差等等。如果周末你也是坚持学习，那么最理想状况下，6个半月就可以学完，达到工作后能被人带的水平。但我知道那其实基本不可能。
                  </div>
                  <div class="read-more">
                    <a href="read.html" class="fc-black f-fwb">继续阅读</a>
                  </div>
                  <aside class="f-oh footer">
                    <div class="f-fl tags">
                      <span class="fa fa-tags fs-16"></span>
                      <a class="tag">java路线</a>
                    </div>
                    <div class="f-fr">
                      <span class="read">
                        <i class="fa fa-eye fs-16"></i>
                        <i class="num">213</i>
                      </span>
                      <span class="ml20">
                        <i class="fa fa-comments fs-16"></i>
                        <a href="javascript:void(0)" class="num fc-grey">1</a>
                      </span>
                    </div>
                  </aside>
                </section>

                <section class="article-item zoomIn article">
                  <div class="fc-flag">置顶</div>
                  <h5 class="title">
                    <span class="fc-blue">【原创】</span>
                    <a href="read.html">Java学习路线推荐</a>
                  </h5>
                  <div class="time">
                    <span class="day">1</span>
                    <span class="month fs-18">7<span class="fs-14">月</span></span>
                    <span class="year fs-18 ml10">2020</span>
                  </div>
                  <div class="content">
                    <a href="read.html" class="cover img-light">
                      <img src="image/java.jpg" />
                    </a>
                    这篇文章是为了介绍自己自学用过的Java视频资料。本套整合教程总共180+G，共450+小时。考虑到绝大部分视频至少要看两遍，而且视频总时长并不代表学习时长，所以零基础初学者总学习时间大约为：600小时视频时长
                    + 100小时理解 +
                    100小时练习，至少需要800小时。你可能觉得自己能一天学习8小时，实际上平均下来每天能学4小时都算厉害了。总会有各种原因，比如当天内容太难，公司聚会，要出差等等。如果周末你也是坚持学习，那么最理想状况下，6个半月就可以学完，达到工作后能被人带的水平。但我知道那其实基本不可能。
                  </div>
                  <div class="read-more">
                    <a href="read.html" class="fc-black f-fwb">继续阅读</a>
                  </div>
                  <aside class="f-oh footer">
                    <div class="f-fl tags">
                      <span class="fa fa-tags fs-16"></span>
                      <a class="tag">java路线</a>
                    </div>
                    <div class="f-fr">
                      <span class="read">
                        <i class="fa fa-eye fs-16"></i>
                        <i class="num">213</i>
                      </span>
                      <span class="ml20">
                        <i class="fa fa-comments fs-16"></i>
                        <a href="javascript:void(0)" class="num fc-grey">1</a>
                      </span>
                    </div>
                  </aside>
                </section>
              </article>
            </div>
          </div>
          <div class="col-other">
            <div class="inner">
              <div class="other-item" id="categoryandsearch">
                <div class="search">
                  <label class="search-wrap">
                    <input type="text" id="searchtxt" placeholder="输入关键字搜索" />
                    <span class="search-icon">
                      <i class="fa fa-search"></i>
                    </span>
                  </label>
                  <ul class="search-result"></ul>
                </div>
                <ul class="category mt20" id="category">
                  <li data-index="0" class="slider"></li>
                  <li data-index="1"><a href="/Blog/Article">全部文章</a></li>
                  <li data-index="2"><a href="/Blog/Article/1/">Java</a></li>
                  <li data-index="3"><a href="/Blog/Article/2/">前端</a></li>
                  <li data-index="4"><a href="/Blog/Article/3/">Python</a></li>
                  <li data-index="5"><a href="/Blog/Article/4/">PHP</a></li>
                  <li data-index="6"><a href="/Blog/Article/5/">其它</a></li>
                </ul>
              </div>
              <!--右边悬浮 平板或手机设备显示-->
              <div
                class="category-toggle"
                :class="{ 'layui-hide': !isCategoryIn }"
                @click.stop="categroyIn"
                v-if="isCategoryIn"
              >
                <i class="layui-icon">&#xe603;</i>
              </div>
              <div
                class="article-category"
                :class="{ 'layui-show': !isCategoryIn, categoryIn: !isCategoryIn }"
                @click="categoryOut"
                v-else
              >
                <div class="article-category-title">分类导航</div>
                <a href="/Blog/Article/1/">Java</a>
                <a href="/Blog/Article/2/">前端</a>
                <a href="/Blog/Article/3/">Python</a>
                <a href="/Blog/Article/4/">PHP</a>
                <a href="/Blog/Article/5/">其它</a>
                <div class="f-cb"></div>
              </div>
              <!--遮罩-->
              <div class="blog-mask animated layui-hide"></div>
              <div class="other-item">
                <h5 class="other-item-title">热门文章</h5>
                <div class="inner">
                  <ul class="hot-list-article">
                    <li><a href="/Blog/Read/9">SpringBoot 入门爬虫项目实战</a></li>
                    <li><a href="/Blog/Read/12">SpringBoot 2.x 教你快速入门</a></li>
                    <li><a href="/Blog/Read/13">java学习路线</a></li>
                    <li>
                      <a href="/Blog/Read/4"
                        >基于SpringBoot+JWT+Redis跨域单点登录的实现</a
                      >
                    </li>
                    <li>
                      <a href="/Blog/Read/7">SpringBoot 中如何使用SwaggerAPI接口文档？</a>
                    </li>
                    <li><a href="/Blog/Read/11">小白轻松入门Redis</a></li>
                    <li><a href="/Blog/Read/14">微信一键登录功能的实现</a></li>
                    <li><a href="/Blog/Read/8">NPOI导入导出Excel</a></li>
                  </ul>
                </div>
              </div>
              <div class="other-item">
                <h5 class="other-item-title">置顶推荐</h5>
                <div class="inner">
                  <ul class="hot-list-article">
                    <li><a href="/Blog/Read/16">java学习路线</a></li>
                    <li>
                      <a href="/Blog/Read/14"
                        >基于SpringBoot+JWT+Redis跨域单点登录的实现</a
                      >
                    </li>
                    <li><a href="/Blog/Read/9">小白轻松入门Redis</a></li>
                  </ul>
                </div>
              </div>
              <div class="other-item">
                <h5 class="other-item-title">最近访客</h5>
                <div class="inner">
                  <dl class="vistor">
                    <dd>
                      <a href="javasript:;"
                        ><img src="image/a1.png" /><cite>Anonymous</cite></a
                      >
                    </dd>
                    <dd>
                      <a href="javasript:;"
                        ><img src="image/a4.png" /><cite>Dekstra</cite></a
                      >
                    </dd>
                    <dd>
                      <a href="javasript:;"><img src="image/a2.png" /><cite>惜i</cite></a>
                    </dd>
                    <dd>
                      <a href="javasript:;"
                        ><img src="image/a3.png" /><cite>↙Aㄨ计划 ◆莪↘</cite></a
                      >
                    </dd>
                    <dd>
                      <a href="javasript:;"><img src="image/a4.png" /><cite>.</cite></a>
                    </dd>
                    <dd>
                      <a href="javasript:;"
                        ><img src="image/a1.png" /><cite>Lambert.</cite></a
                      >
                    </dd>
                    <dd>
                      <a href="javasript:;"><img src="image/a2.png" /><cite>64ღ</cite></a>
                    </dd>
                    <dd>
                      <a href="javasript:;"
                        ><img src="image/a3.png" /><cite>doBoor</cite></a
                      >
                    </dd>
                    <dd>
                      <a href="javasript:;"
                        ><img src="image/a4.png" /><cite>毛毛小妖</cite></a
                      >
                    </dd>
                    <dd>
                      <a href="javasript:;"
                        ><img src="image/a1.png" /><cite>NULL</cite></a
                      >
                    </dd>
                    <dd>
                      <a href="javasript:;"
                        ><img src="image/a2.png" /><cite>吓一跳</cite></a
                      >
                    </dd>
                    <dd>
                      <a href="javasript:;"
                        ><img src="image/a3.png" /><cite>如初</cite></a
                      >
                    </dd>
                  </dl>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="grid-footer">
      <div class="footer-fixed">
        <div class="copyright">
          <div class="info">
            <div class="contact">
              <a href="javascript:void(0)" class="github" target="_blank"
                ><i class="fa fa-github"></i
              ></a>
              <a
                href="https://wpa.qq.com/msgrd?v=3&uin=930054439&site=qq&menu=yes"
                class="qq"
                target="_blank"
                title="930054439"
                ><i class="fa fa-qq"></i
              ></a>
              <a
                href="https://mail.qq.com/cgi-bin/qm_share?t=qm_mailme&email=gbiysbG0tbWyuMHw8K-i7uw"
                class="email"
                target="_blank"
                title="930054439@qq.com"
                ><i class="fa fa-envelope"></i
              ></a>
              <a href="javascript:void(0)" class="weixin"><i class="fa fa-weixin"></i></a>
            </div>
            <p class="mt05">
              Copyright &copy; 2019-2020 ZQ博客 All Rights Reserved V.3.1.3 Power by
              ZQ博客
            </p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import "./js/gloable.js";
import { ref, onMounted } from "vue";
import Yinghua from '@/components/yinghua.vue'

onMounted(() => {
  let theme = localStorage.getItem("theme")
    ? JSON.parse(localStorage.getItem("theme"))
    : "light";
  document.documentElement.setAttribute("theme", theme);
});



let isCategoryIn = ref<booleen>(true);

const categroyIn = () => {
  isCategoryIn.value = false;
};

const categoryOut = () => {
  isCategoryIn.value = true;
};





</script>

<style scoped lang="scss">
@import "./css/blog.css";
@import "./css/font-awesome.min.css";
@import "./css/gloable.css";
@import "./css/layui.css";
@import "./css/master.css";
@import "./css/nprogress.css";


</style>
